<html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
    </head>
    <body>
        <div id="app">
            <el-button @click="addNum()" @dblclick="addNum('num1')"  @contextmenu.prevent="addNum('num2')">{{ message }}, 点击数{{num}}, 双击数{{num1}}, 右击数{{num2}}</el-button>

            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="Activity name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Activity zone">
                    <el-select v-model="form.region" placeholder="please select your zone">
                        <el-option value="shanghai"/>111</el-option>
                        <el-option value="beijing"/>222</el-option>
                        <el-option value="shanghai"/>333</el-option>
                        <el-option value="hunan"/>4444</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Activity time">
                    <el-col :span="11">
                    <el-date-picker
                        v-model="form.date1"
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                    </el-col>
                    <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                    <el-time-picker
                        v-model="form.date2"
                        placeholder="Pick a time"
                        style="width: 100%"
                    />
                    </el-col>
                </el-form-item>
                <el-form-item label="Instant delivery">
                    <el-switch v-model="form.delivery" />
                </el-form-item>
                <el-form-item label="Activity type">
                    <el-checkbox-group v-model="form.type">
                    <el-checkbox value="Online activities" name="type">
                        Online activities
                    </el-checkbox>
                    <el-checkbox value="Promotion activities" name="type">
                        Promotion activities
                    </el-checkbox>
                    <el-checkbox value="Offline activities" name="type">
                        Offline activities
                    </el-checkbox>
                    <el-checkbox value="Simple brand exposure" name="type">
                        Simple brand exposure
                    </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="Resources">
                    <el-radio-group v-model="form.resource">
                    <el-radio value="Sponsor">Sponsor</el-radio>
                    <el-radio value="Venue">Venue</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form">
                    <el-input v-model="form.desc" type="textarea" @input="changeText"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">Create</el-button>
                    <el-button>Cancel</el-button>
                </el-form-item>
                <el-upload
                    class="upload-demo"
                    drag
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            jpg/png files with a size less than 500kb
                        </div>
                    </template>
                </el-upload>
            </el-form>
        </div>
        <!-- chebox dom -->
        <input id="check-dom" type="checkbox" />
        <input id="radio-dom" type="radio" />
        <select name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <input id="other" type="file">
    </body>
    <script>
        const App = {
            data() {
                return {
                    message: "Hello Element Plus",
                    // do not use same name with ref
                    form:{
                        name: '',
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: '',
                    },
                    num: 0,
                    num1: 0,
                    num2: 0,
                };
            },
            methods:{
                onSubmit:()=>{
                    alert('提交成功');
                },
                changeText:(e)=>{
                    alert('输入事件');
                },
                addNum(tag='num'){
                    this[tag] += 1;
                }
            }
        };

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");

    </script>
</html>